<template>
  <div>
    <p>标题:<input type="text" v-model="title"></p>
    <p>内容:
        <mavon-editor v-model="content" ref="md" @change="change"  style="min-height: 300px" /></p>
    <p>图片:<input type="file" id="img"></p>
    <p>用户：<select v-model="name">
      <option :value="i.id" v-for="i in list">{{i.user}}</option>
    </select></p>
    <p><button @click="btn">添加</button></p>
  </div>

</template>

<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
    export default {
        name: "AddUser",
        data(){
          return{
            title:'',
            content:'',
            list:[],
            html:'',
            name:'',
            token:sessionStorage.getItem('token')
          }
        },
        components:{
          mavonEditor
        },
        methods:{
          change(value,render){
            this.html=render
            console.log(this.html)
          },
          btn(){
            if(this.token){
            var img=document.getElementById('img').files[0]
            let form_data=new FormData()
            form_data.append('title',this.title)
            form_data.append('content',this.html)
            form_data.append('img',img)
            form_data.append('username',this.username)
            axios({
              url:'http://127.0.0.1:8000/app01/addarticle/',
              method:'post',
              data:form_data
            }).then(res=>{
              console.log(res)
            })
          }else {
              alert('请先登录')
              this.$router.push('/Login')
            }
          }
        },
        created() {
          axios({
              url:'http://127.0.0.1:8000/app01/register/',
              method:'get',
            }).then(res=>{
              console.log(res)
            this.list=res.data
            })
        }
    }
</script>

<style scoped>

</style>